<template>
  <div>
    <a-modal v-model:visible="visible" :width="900">
      <template #title>
        <h3>试验历史数据</h3>
      </template>
      <template #footer>
        <a-button key="back" @click="handleCancelClick" class="btn">取消</a-button>
        <a-button key="submit" type="primary" @click="handleOkClick" class="sub-btn">确定</a-button>
      </template>
        <!-- <div class="main"> -->
            <a-row class="top-title">
                <a-col :span="4"><h4>编号：{{ props.selectRecord2.id }}</h4></a-col>
                <a-col :span="6"><h4>规格型号：{{ props.selectRecord2.specification }}</h4></a-col>
                <a-col :span="6"><h4>保管人：{{ props.selectRecord2.keeper }}</h4></a-col>
            </a-row>
            <a-table :columns="columns" :data-source="data" class="table">
                <template #bodyCell="{ column, text }">
                    <template v-if="column.dataIndex === 'name'">
                        <a>{{ text }}</a>
                    </template>
                </template>
            </a-table>
        <!-- </div> -->
    </a-modal>
</div>
</template>

<script setup>
import { ref,watchEffect } from 'vue';
const props = defineProps(['selectRecord2','historyData'])
const visible = ref(false);
const data = ref([])
const columns = [{
  title: '试验日期',
  dataIndex: 'testDate',
  key: 'testDate',
}, {
  title: '有效截止日期',
  dataIndex: 'expireDate',
  key: 'expireDate',
}, {
  title: '试验人',
  dataIndex: 'tester ',
  key: 'tester ',
}, {
  title: '审核人',
  dataIndex: 'auditor',
  key: 'auditor',
}, {
  title: '投运日期',
  dataIndex: 'operateDate',
  key: 'operateDate',
}, {
  title: '试验结论',
  dataIndex: 'operateConclusion',
  key: 'operateConclusion',
}];

watchEffect(() => {
    data.value = props.historyData
    // console.log(data.value);
})
const showModal = () => {
    visible.value = true;
};
 //取消按钮
 const handleCancelClick = () => {
  visible.value = false;
}
//确定按钮
const handleOkClick = () => {
  visible.value = false;
} 
    
defineExpose({
    showModal,
})

</script>
<style lang="less" scoped>
h3{
      display: inline-block;
      font-weight: 700;
    }
.top-title{
      padding-left: 10px;
}
.table{
    padding-top: 20px;
}
.sub-btn{
      background-color: #169bd5;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 15px;
      color: white;
      height: 38px;
      width: 80px;
      padding: 0;
  }    
  .btn{
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 15px;
      color: #292929;
      height: 38px;
      width: 80px;
      padding: 0;
  }    
</style>